<template>
  <div class="app-container">
    <div ref="refsTable" >
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

        <el-form-item label="登记时间">
          <el-date-picker v-model="dateRange" style="width:370px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="入库时间">
          <el-date-picker v-model="entryRange" style="width:370px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="项目类型" prop="projectTypeId">
          <el-autocomplete
            class="inline-input"
            v-model="queryParams.projectTypeName"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="handleSelectProject"
            @focus="change(1)"
            style="width:221px"
            clearable
          ></el-autocomplete>
          <!-- <el-select v-model="queryParams.projectTypeId" placeholder="全部" clearable style="width:221px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select> -->
        </el-form-item>
        <el-form-item label="样本类型" prop="sampleTypeId">
          <el-autocomplete
            class="inline-input"
            v-model="queryParams.sampleTypeName"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="handleSelectSample"
            @focus="change(0)"
            style="width:228px"
            clearable
          ></el-autocomplete>
          <!-- <el-select v-model="queryParams.sampleTypeId" placeholder="全部" clearable style="width:221px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in sampleTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select> -->
        </el-form-item>
        <el-form-item label="核酸类型" prop="nucleicAcidTypeId">
          <el-select v-model="queryParams.nucleicAcidTypeId" placeholder="全部" clearable style="width:221px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in nucleateTypelList" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="条形码" prop="barcodeCode">
          <el-input  v-model="queryParams.barcodeCode" placeholder="请输入条形码" clearable style="width:221px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="实验编号" prop="experimentNumber">
          <el-input  v-model="queryParams.experimentNumber" placeholder="实验编号或流水号" clearable style="width:221px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="外包状态" prop="outsourcersStatus">
          <el-select v-model="queryParams.outsourcersStatus" placeholder="全部" clearable style="width:221px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in outsourcersStatusList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="外包商" prop="outsourcersId">
          <el-select v-model="queryParams.outsourcersId" placeholder="请选择外包商" clearable style="width:221px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in outsourcersList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyName">
          <el-input  v-model="queryParams.keyName" placeholder="送检单位/送检姓名" clearable style="width:221px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <div style="display: flex;align-items: center">
          <el-button type="primary" size="mini" @click="handleSure" v-hasPermi="['system:dict:add']">
            确认
          </el-button>
          <div>
            <span
              style="font-size: 14px;color: #606266;font-weight: 700;margin-left: 25px;margin-right: 10px;">外包商</span>
            <el-select v-model="outsourcersId" placeholder="请选择外包商" clearable style="width: 180px">
              <el-option value label="全部"></el-option>
              <el-option v-for="item in outsourcersList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <el-button type="primary" size="mini" style="margin-left: 10px;margin-right: 10px;"
            @click="handleBatchBarOutsourcersg" v-hasPermi="['system:dict:add']">
            批量修改外包商
          </el-button>
          <el-input  v-model="trackingNumber" placeholder="请输入邮寄单号" clearable style="width: 200px"
            @keyup.enter.native="handleQuery" />
          <el-button type="primary" style="margin-left: 10px;" size="mini" @click="handleBatchTrackingNumber"
            v-hasPermi="['system:dict:add']">
            批量填写邮寄单号
          </el-button>
        </div>


        <el-col :span="1.5">
          <el-dropdown trigger="click">
            <el-button type="primary" size="mini">
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleExport('now')">导出当前</el-dropdown-item>
              <el-dropdown-item @click.native="handleExport('all')">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>


    <el-table :row-class-name="rowStyle" border highlight-current-row v-loading="loading" :data="typeList"
      @selection-change="handleSelectionChange" :height="heights" :header-cell-style="{
        background: '#ebebeb'
      }">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="外包商" align="center" prop="outName" width="150" />
      <el-table-column label="联系人" align="center" prop="contactName" width="100"></el-table-column>
      <el-table-column label="条码号" align="center" prop="barcodeCode" width="120" />
      <el-table-column label="项目类型" width="350" align="center" prop="projectTypeName" />
      <el-table-column label="实验编号" align="center" prop="experimentNumber" width="200" />
      <el-table-column label="外包状态" align="center">
        <template slot-scope="scope">
          {{ outsourcersStatusName[scope.row.outsourcersStatus] }}
        </template>
      </el-table-column>
      <el-table-column label="确认人" align="center" prop="confirmName" />
      <el-table-column label="确认时间" align="center" prop="confirmTime" width="160" />
      <el-table-column label="邮寄单号" align="center" prop="mailingNumber" width="120" />
      <el-table-column label="快递公司" align="center" prop="courierCompany" />
      <el-table-column label="邮寄人" align="center" prop="mailer" show-overflow-tooltip />
      <el-table-column label="邮寄人联系电话" align="center" prop="mailerPhone" width="200" />
      <el-table-column label="邮寄时间" align="center" prop="mailerTime" width="200" />
      <el-table-column label="外包商名称" align="center" prop="outName" width="150" />
      <el-table-column label="外包商负责人" align="center" prop="responseName" width="120" />
      <el-table-column label="外包商负责电话" align="center" prop="phone" width="200" />
      <el-table-column label="外包商收获地址" align="center" width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.area? scope.row.area[0] + scope.row.area[1] + scope.row.area[2] + scope.row.address : ''}}
        </template>
      </el-table-column>
      <el-table-column label="入库样本编号" align="center" prop="inputSampleNumber" width="200" />
      <el-table-column label="入库批次号" align="center" prop="inputBatchNumber" width="200" />
      <el-table-column label="登记时间" align="center" prop="registrationTime" width="160" />
      <el-table-column label="送检姓名" align="center" prop="submitName" />
      <el-table-column label="送检单位" align="center" prop="inspectionUnit" width="200" show-overflow-tooltip />
      <el-table-column label="平台类型" align="center" prop="platformTypeName" />
      <el-table-column label="核酸类型" align="center" prop="nucleicTypeName" width="100"/>
      <el-table-column label="样本类型" width="120" align="center" prop="sampleTypeName" />
      <el-table-column label="入库人" align="center" prop="inputPerson" />
      <el-table-column label="入库日期" align="center" prop="inputDate" width="200" />
      <el-table-column label="是否符合实验" align="center" prop="experimentalStatus" width="120">
        <template slot-scope="scope">
          {{ scope.row.experimentalStatus === 0 ? '未符合要求' : scope.row.experimentalStatus === 1 ? '符合要求' : '' }}
        </template>
      </el-table-column>

      <el-table-column label="是否作废" align="center" prop="isVoid">
        <template slot-scope="scope">
          {{ scope.row.isVoid === 0 ? '否' : '是' }}
        </template>
      </el-table-column>


      <el-table-column label="作废原因" align="center" prop="reasonContent" width="150" show-overflow-tooltip/>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" fixed="right" width="230" align="center" >
        <template slot-scope="scope">
          <div class="czDiv">
          <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :on-exceed="handleExceed"
              :before-upload="beforeAvatarUpload" accept=".pdf" name="file" :headers="upload.headers" 
              :show-file-list="false" style="margin-right:8px;margin-bottom:1px">
          <el-button style="padding:0"  type="text" v-hasPermi="['system:dict:remove']" @click="submitReport(scope.row)" >上传报告
          </el-button>
        </el-upload>
          <el-button style="padding:0"  type="text" @click="lookReport(scope.row)" >查看报告
          </el-button>
          <el-button style="padding:0"  type="text"  @click="handleUpdate(scope.row)"
            v-hasPermi="['system:dict:edit']">编辑
          </el-button>
          <el-button  v-if="scope.row.isVoid === 0" style="color: red;padding:0"  type="text" 
            @click="handleInvalid(scope.row)" v-hasPermi="['system:dict:edit']">作废
          </el-button>
          <el-button style="padding:0" v-else   type="text" icon="el-icon-open"
                     @click="handleOpen(scope.row)" v-hasPermi="['system:dict:edit']">开启
          </el-button>
        </div>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <pagination   style="margin:0;padding: 0;" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <div style="overflow: auto" class="elForm">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px" :inline="true" size="mini">

          
            <el-form-item label="条码号" prop="barcodeCode">
              <el-input style="width:210px" v-model="form.barcodeCode" placeholder="请输入编码" disabled />
            </el-form-item>
          

          
            <el-form-item label="项目类型" prop="projectTypeName">
              <el-input style="width:210px" v-model="form.projectTypeName" placeholder="请输入labDeptId" disabled />
            </el-form-item>
          

          
            <el-form-item label="实验编号" prop="experimentNumber">
              <el-input style="width:210px" v-model="form.experimentNumber" placeholder="请输入名称" disabled />
            </el-form-item>
          

          
            <el-form-item label="状态" prop="status">
              <el-input style="width:210px" v-model="form.status" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="入库样本编号" prop="inputSampleNumber">
              <el-input style="width:210px" v-model="form.inputSampleNumber" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="入库批次号" prop="inputBatchNumber">
              <el-input style="width:210px" v-model="form.inputBatchNumber" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="录入时间" prop="registerCreateDate">
              <el-input style="width:210px" v-model="form.registerCreateDate" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="入库日期" prop="inputDate">
              <el-input style="width:210px" v-model="form.inputDate" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="送检姓名" prop="submitName">
              <el-input style="width:210px" v-model="form.submitName" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="送检单位" prop="inspectionUnit">
              <el-input style="width:210px" v-model="form.inspectionUnit" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="核酸类型" prop="nucleicTypeName">
              <el-input style="width:210px" v-model="form.nucleicTypeName" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="样本类型" prop="sampleTypeName">
              <el-input style="width:210px" v-model="form.sampleTypeName" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="平台类型" prop="platformTypeName">
              <el-input style="width:210px" v-model="form.platformTypeName" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="外包商" prop="outsourcersId">
              <el-select v-model="form.outsourcersId" @change="outsourcersSearch" clearable size="small"
              style="width:210px">
                <el-option v-for="item in outsourcersList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          

          
            <el-form-item label="外包商负责人" prop="responseName">
              <el-input style="width:210px" v-model="form.responseName" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="外包联系电话" prop="phone">
              <el-input style="width:210px" v-model="form.phone" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

         
            <el-form-item label="外包商收货地址">
              <el-input style="width:210px" :value="address" placeholder="请输入内容" disabled></el-input>
            </el-form-item>
          

          
            <el-form-item label="快递公司" prop="courierCompany">
              <el-input style="width:210px" v-model="form.courierCompany" placeholder="请输入快递公司"></el-input>
            </el-form-item>
          

          
            <el-form-item label="邮寄单号" prop="mailingNumber">
              <el-input style="width:210px" v-model="form.mailingNumber" placeholder="请输入邮寄单号"></el-input>
            </el-form-item>
          

          
            <el-form-item label="邮寄人" prop="mailer">
              <el-input style="width:210px" v-model="form.mailer" placeholder="请输入邮寄人"></el-input>
            </el-form-item>
          

          
            <el-form-item label="邮寄人联系电话" prop="mailerPhone">
              <el-input style="width:210px" v-model="form.mailerPhone" placeholder="请输入邮寄人联系电话"></el-input>
            </el-form-item>
          

         
            <el-form-item label="邮寄时间" prop="mailerTime">
              <el-date-picker v-model="form.mailerTime" size="small" style="width:210px" format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss" type="datetime"></el-date-picker>
            </el-form-item>
          


         
            <el-form-item label="作废原因" prop="reasonId">
              <el-select v-model="form.reasonId" clearable size="small" style="width:560px" disabled>
                <el-option v-for="item in reasonTemplateList" :key="item.id" :label="item.reasonName"
                  :value="item.id" />
              </el-select>
              <!-- <el-input v-model="form.reasonName" disabled style="width:560px"></el-input> -->
            </el-form-item>
          <!-- <el-form-item label=" "></el-form-item> -->

         
            <el-form-item label="备注" prop="remark">
              <el-input style="width:560px" v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
            </el-form-item>
          
        </el-form>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确定</el-button>
      </span>

    </el-dialog>
    <el-dialog :visible.sync="nullifyDialog" style="margin-top:15vh;" title="提示" width="500px">
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        class="demo-ruleForm"
        ref="ruleForm2"
        :inline="true"
      >
        <el-form-item label="请输入作废原因" prop="reasonId">
          <el-select v-model="ruleForm2.reasonId" placeholder="请选择" style="width:320px" @change="fn">
            <el-option
              v-for="item in Arr.reasonNameArr"
              :key="item.id"
              :label="item.reasonName"
              :value="item.id"

            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="nullifyDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="sureToNullify('ruleForm2')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="reportDialog"  title="提示" width="500px">
      <el-image title='点击查看全部内容' :src="coverUrl" @click="windowOpen" style="cursor:pointer"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reportDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  outsourcersManage,
  outsourcersManageEdit,
  outsourcersManageUpdate,
  batchEditMailingNumber,
  batchEditOutResource,
  confirm
} from '@/api/auxiliary/outsourcerManagement/outsourcerManagement'
import { projectType } from '@/api/dictionary/systemDictionary/projectType'
import { sampleType } from '@/api/dictionary/systemDictionary/sampleType'
import { nucleateType } from '@/api/dictionary/systemDictionary/nucleateType'
import { outsourcers } from '@/api/tree/outsourcers'
import { enumerate } from '@/api/dictionary/systemSetting/enumeration'
import { reasonTemplate } from '@/api/dictionary/systemSetting/reasonTemplate'
import { manageBackList } from '@/api/comprehensiveSearchManage/fallback'
import {voidPlaceOn,delPlaceOn} from '@/api/commonArr/index.js'
import {  Arr } from "@/utils/data.js";
import { addReport,getAddReport } from "@/api/reportReadManage/index.js";
import { getToken } from "@/utils/auth";
// import { voidPlaceOn} from '@/api/commonArr/index.js'
export default {
  name: 'outsourcerManagement',
  data () {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      coverUrl: "https://pic.imgdb.cn/item/638e1ba3b1fccdcd360cf95b.png",
      reportDialog:false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      Arr: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示查询条件
      showSearch: true,
      // 总条数
      total: 0,
      // 预警数据
      typeList: [],
      // 核酸数据
      nucleateTypelList: [],
      // 项目数据
      projectTypeList: [],
      // 样本数据
      sampleTypeList: [],
      //外包商
      outsourcersList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 登记日期范围
      dateRange: [],
      // 录入时间范围
      entryRange: [],
      form: {},
      ruleForm2:{},
      nullifyDialog: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectTypeId: '',
        sampleTypeId: '',
        nucleicAcidTypeId: '',
        barcodeCode: undefined,
        experimentNumber: undefined,
        outsourcersId: '',
        outsourcersStatus: '',
        keyName: undefined,
      },
      outsourcersStatusName: {
        0: '待确认',
        1: '已确认',
        2: '已邮寄',
        3: '已上传'

      },
      outsourcersStatusList: [
        {
          name: '待确认',
          id: 0
        },
        {
          name: '已确认',
          id: 1
        },
        {
          name: '已邮寄',
          id: 2
        },
        {
          name: '已上传',
          id: 3
        }
      ],
      rules2: {
        reasonId: [
          { required: true, message: "请输入作废原因", trigger: "change" }
        ]
      },
      outsourcersId: '',
      trackingNumber: '',
      rules: {
        outsourcersId: [
          { required: true, message: '请选择外包商', trigger: ['blur', 'change'] }
        ],
        courierCompany: [
          { required: true, message: '请输入快递公司', trigger: 'blur' }
        ],
        mailingNumber: [
          { required: true, message: '请输入邮寄单号', trigger: 'blur' }
        ],
        mailer: [
          { required: true, message: '请输入邮寄人', trigger: 'blur' }
        ],
        mailerPhone: [
          { required: true, message: '请输入邮寄人联系电话', trigger: 'blur' }
        ],
        mailerTime: [
          { required: true, message: '请选择邮寄时间', trigger: ['blur', 'change'] }
        ]
      },
      address: '',
      enumerateId: '',
      reasonTemplateList: [],
      heights: undefined,
      row:[],
      restaurants:[],
      sampleTypeArr:[],
      projectTypeArr:[],
      reportUrl:'',
      stateId:'',
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/process/analyze/importDataList"
      },
      id:''
    }
  },
  created () {
    Arr.sampleTypeArr.map(el=>{
      this.sampleTypeArr.push({
        value:el.name
      })
    })
    Arr.projectTypeArr.map(el=>{
      this.projectTypeArr.push({
        value:el.name
      })
    }) 
    this.dateRange[0] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() 
    );
    this.dateRange[1] = this.parseTime(
      new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1000
    );
    // this.entryRange[0] = this.parseTime(
    //   new Date(new Date().toLocaleDateString()).getTime()
    // );
    // this.entryRange[1] = this.parseTime(
    //   new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1000
    // );
    this.getList()
    this.otherList()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      }
    })
    this.Arr=Arr
  },
  methods: {
    lookReport(row){
      if(row.mainState<11){
        this.$message.error('暂无数据')
        return
      }
      this.reportDialog = true
      getAddReport({ stateId:row.processStateId }).then(res => {
        this.reportUrl = res.data.reportUrl
      })
    },
    windowOpen() {
      window.open(this.reportUrl)
    },
    submitReport(row){
      console.log(row);
      this.stateId=row.processStateId
    },
    handleExceed() {
      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    handleUploadSuccess(res) {
      console.log("res:", res)
      // return
      this.reportUrl = res.data.url
      let params = {
        reportUrl: this.reportUrl,
        stateId: this.stateId
      }
      addReport(params).then(() => {
        this.$message.success('提交成功')
        voidPlaceOn({ stateId: this.stateId, status: 1 })
      })
    },
    handleSelectSample(item) {
      this.params.sampleTypeId=item.id
    },
    handleSelectProject(item){
      this.params.projectTypeId=item.id
    },
    // 下拉框
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.sampleTypeArr,
        this.projectTypeArr,
      ];
      return array;
    },
    handleSelect(item) {
      console.log(item);
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    /** 预警 */
    getList () {
      this.loading = true
      outsourcersManage(this.addParameter(this.queryParams, this.dateRange, this.entryRange)).then(response => {
        for (let i = 0; i < response.rows.length; i++) {
          response.rows[i].area = JSON.parse(response.rows[i].area)
        }
        this.typeList = response.rows
        this.total = response.total
        this.loading = false
      }
      )
    },
    addParameter (params, dateRange, entryRange) {
      var search = params
      search.startRegisterTime = ""
      search.endRegisterTime = ""
      if (null != dateRange && '' != dateRange) {
        search.startRegisterTime = dateRange[0]
        search.endRegisterTime = dateRange[1]
      }
      search.startInputTime = ""
      search.endInputTime = ""
      if (null != entryRange && '' != entryRange) {
        search.startInputTime = entryRange[0]
        search.endInputTime = entryRange[1]
      }

      return search
    },

    otherList () {
      nucleateType().then(response => {
        this.nucleateTypelList = response.rows
      })
      projectType().then(response => {
        this.projectTypeList = response.rows
      })
      sampleType().then(response => {
        this.sampleTypeList = response.rows
      })
      outsourcers().then(response => {
        this.outsourcersList = response.rows
      })
    },
    handleOpen (row) {
      // outsourcersManageEdit(row.id).then(res => {
      //   console.log(res);
        
      
      // })
      console.log(row,11111);
      this.$confirm('是否开启选中的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        outsourcersManageUpdate({
          ...row,
          isVoid: 0
        }).then(response => {         
          this.msgSuccess('开启成功')
          delPlaceOn(row.processStateId)
          this.getList()

        })
      })
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        pageNum: 1,
        pageSize: 20,
        projectTypeId: undefined,
        sampleTypeId: undefined,
        nucleicAcidTypeId: undefined,
        barcodeCode: undefined,
        experimentNumber: undefined,
        outsourcersId: undefined,
        outsourcersStatus: undefined,
        keyName: undefined,
      }
      this.resetForm('form')
    },
    /** 查询按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.$nextTick(() => {
        this.getList()
      })
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.entryRange = []
      this.surplus = undefined
      this.timeUnit = undefined
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.id=selection[0].id
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
     /** 编辑按钮操作 */
     handleUpdate (row) {
      const id = row.id || this.ids

      enumerate().then((response) => {
        response.rows.map(item => {
          if (item.name === '作废原因') {
            this.enumerateId = item.id
          }
        })
        this.getReason()
      })
      outsourcersManageEdit(id).then(response => {
        response.data.area = JSON.parse(response.data.area)
        this.form = response.data
        this.address = this.form.area[0] + this.form.area[1] + this.form.area[2] + this.form.address
        this.open = true
        this.title = '入库：编辑'
      })
    },
    handleSure () {
      if (this.ids.length < 1) {
        this.$message.error('请选择数据项')
      } else {
        const id = this.id
      enumerate().then((response) => {
        response.rows.map(item => {
          if (item.name === '作废原因') {
            this.enumerateId = item.id
          }
        })
        this.getReason()
      })
      outsourcersManageEdit(id).then(response => {
        response.data.area = JSON.parse(response.data.area)
        this.form = response.data
        this.address = this.form.area[0] + this.form.area[1] + this.form.area[2] + this.form.address
        this.open = true
        this.title = '入库：编辑'
      })
        // this.$confirm('是否确认选中的数据项?', '警告', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(res => {
          // confirm({ ids: this.ids }).then(response => {
        //     this.msgSuccess('确认成功')
        //     this.form = {}
        //     this.getList()
        //   })
        // })
        
      }
    },
    /** 批量修改外包商 */
    handleBatchBarOutsourcersg () {
      if (this.ids.length < 1) {
        this.$message.error('请选择数据项')
      } else {
        if (this.outsourcersId === '') {
          this.$message.error('请选择需要修改的外包商')
        } else {
          this.$confirm('是否确认选中的数据项修改外包商?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(res => {
            return batchEditOutResource({ ids: this.ids, outsourcersId: this.outsourcersId })
          }).then(res => {
            this.msgSuccess('修改成功')
            this.outsourcersId = ''
            this.getList()
            console.log(res.rows, '1')
          })
        }
      }

    },
    /** 批量修改邮寄号码 */
    handleBatchTrackingNumber () {
      if (this.ids.length < 1) {
        this.$message.error('请选择数据项')
      } else {
        if (this.trackingNumber === '') {
          this.$message.error('请输入需要填写的邮寄单号')
        } else {
          this.$confirm('是否确认选中的数据项填写邮寄单号?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(res => {
            return batchEditMailingNumber({ ids: this.ids, mailingNumber: this.trackingNumber })
          }).then(res => {
            this.msgSuccess('填写成功')
            this.trackingNumber = ''
            this.getList()
            console.log(res.rows, '2')
          })
        }
      }
    },
    // /** 导出按钮操作 */
    handleExport (e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.queryParams //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      this.$confirm('是否确认导出' + different + '数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        loading = that.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        outsourcersManage(params).then((response) => {
          for (let i = 0; i < response.rows.length; i++) {
            response.rows[i].area = JSON.parse(response.rows[i].area)
          }
          let mydata = [
            [
              '序号',
              '外包商',
              '联系人',
              '条码号',
              '项目类型',
              '实验编号',
              '外包状态',
              '确认人',
              '确认时间',
              '邮寄单号',
              '快递公司',
              '邮寄人',
              '邮寄人联系电话',
              '邮寄时间',
              '外包商名称',
              '外包商负责人',
              '外包商负责电话',
              '外包商收获地址',
              '入库样本编号',
              '入库批次号',
              '登记时间',
              '送检姓名',
              '送检单位',
              '平台类型',
              '核酸类型',
              '样本类型',
              '入库人',
              '入库时间',
              '是否符合实验',
              '是否作废',
              '作废原因',
              '备注'

            ],
            ...response.rows.map((item, index) => ([
              index + 1,
              item.outName,
              item.contactName,
              item.barcodeCode,
              item.projectTypeName,
              item.experimentNumber,
              that.outsourcersStatusName[item.outsourcersStatus],
              item.inputPerson,
              item.confirmTime,
              item.mailingNumber,
              item.courierCompany,
              item.mailer,
              item.mailerPhone,
              item.mailerTime,
              item.outName,
              item.responseName,
              item.phone,
              item.area[0] + item.area[1] + item.area[2] + item.address,
              item.inputSampleNumber,
              item.inputBatchNumber,
              item.registrationTime,
              item.submitName,
              item.inspectionUnit,
              item.platformTypeName,
              item.nucleicTypeName,
              item.sampleTypeName,
              item.inputPerson,
              item.inputDate,
              item.experimentalStatus === 0 ? '未符合要求' : item.experimentalStatus === 1 ? '符合要求' : '',
              item.isVoid === 0 ? '否' : '是',
              item.reasonContent,
              item.remark
            ]))
          ]
          let requireMerge = []
          that.$util.createxlsx({
            mydata,
            fileName: '外包商管理',
            dataList: response.rows,
            type: 'orderId',
            requireMerge,
            loading
          })
        })
      }).catch(function () {
      })
    },
   
    getReason () {
      this.reasonTemplateList = []
      reasonTemplate().then(response => {
        response.rows.map(item => {
          if (item.enumerateId === this.enumerateId) {
            this.reasonTemplateList.push(item)
            console.log(this.reasonTemplateList,111)
          }
        })
      })
      // console.log(this.reasonTemplateList)
    },
    outsourcersSearch (e) {
      let choose = this.outsourcersList.filter(item => item.id === e)
      this.form.responseName = choose[0].responseName
      this.form.phone = choose[0].phone
      this.form.address = choose[0].address
      this.address = this.form.area[0] + this.form.area[1] + this.form.area[2] + this.form.address
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.area = JSON.stringify(this.form.area)
          // outsourcersManageUpdate(this.form).then(response => {
            confirm(this.form).then(response => {
            this.msgSuccess('编辑成功')
            this.open = false
            this.getList()
          })
        }
      })
    },
    
    handleInvalid (row) {
      this.nullifyDialog = true;
      this.row=row
      // this.$confirm('是否作废选中的数据项?', '警告', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(res => {
      //   outsourcersManageUpdate({
      //     ...row,
      //     isVoid: 1
      //   }).then(response => {
      //     this.msgSuccess('作废成功')
      //     this.getList()
      //     voidPlaceOn({stateId:row.processStateId,status:0}).then(()=>{
      // })
      //   })
      // })
    },
    sureToNullify(formName) {
      let row=this.row
    this.$refs[formName].validate(valid => {
        if (valid) {
          outsourcersManageUpdate({
          ...row,
          reasonId:this.ruleForm2.reasonId,
          isVoid: 1
        })
          .then(() => {
        this.$message.success("已作废");
        this.nullifyDialog = false;
        this.getList();
        voidPlaceOn({stateId:row.processStateId,status:0}).then(()=>{
      })
      });
        } else {
          console.log("error submit!!");
          return false;
        }
      });},
    rowStyle ({ row }) {
      var arr = this.ids
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return 'rowStyle'
        }
      }
    }

  }
}
</script>
<style scoped lang="scss">
.czDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }
.el-form-item {
  margin-bottom: 10px ;
}

.app-container {
  height: 85vh;
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}

::v-deep .rowStyle {
  background-color: #a8d6fe !important;
}

::v-deep .el-table__body tr:hover>td {
  background: #a8d6fe !important;
}

.paginationClass {
  width: 100%;
  height: 70px;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  bottom: 0;
  right: 20px;
  z-index: 99;
}
.elForm{
  .el-form-item{
    margin-bottom:15px
  }
}
.topDiv{
      
      ::v-deep .el-form-item__label {
      font-size:  12px;
      padding:0 5px 0 0 ;
    margin:0;
   
    }
    
    }
</style>
